<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Tk Widgets</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Widgets, Tcl/Tk, Tcl, programming, Linux, learn Tcl/Tk">
<meta name="description" content="This part of the Tcl/Tk tutorial covers Tk Widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Tk Widgets</h1>

<p>
In this part of the Tcl/Tk tutorial, we will cover
some basic Tk widgets. We will have an example for a
<code>checkbutton</code>, <code>label</code>, <code>scale</code> 
and <code>listbox</code> widgets.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 


<p>
Widgets are basic building blocks of a GUI application. Over the years, 
several widgets became a standard in all toolkits on all OS platforms. 
For example a button, a check box or a scroll bar. Some of them might have
a different name. For instance, a check box is called a check button in Tk.
Tk has a small set of widgets which cover the basic programming needs.
More specialized widgets can be created as custom widgets. 
</p>


<h2>Checkbutton</h2>

<p>
The <code>checkbutton</code> is a widget, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean property. 
The <code>checkbutton</code> widget provides a check box with a text label.
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# This program toggles the title of the
# window with the checkbutton widget.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


frame .fr
pack .fr -fill both -expand 1
checkbutton .fr.cb -text "Show title" -command onClick  \
    -onvalue true -offvalue false -variable selected
.fr.cb select 
place .fr.cb -x 50 -y 50 

proc onClick {} {

    global selected

    if {$selected==true} {
    
        wm title . checkbutton
    } else {
        wm title . ""
    }
}


wm title . checkbutton
wm geometry . 250x150+300+300
</pre>

<p>
In our example, we place a check button on the window. The check 
button shows/hides the title of the window. 
</p>

<pre class="explanation">
checkbutton .fr.cb -text "Show title" -command onClick  \
    -onvalue true -offvalue false -variable selected
</pre>

<p>
The <code>checkbutton</code> command creates a checkbutton widget. The -text
option specifies the text which is displayed by the widget. When we click
on the widget, the onClick procedure is executed. When the checkbutton is checked
the selected variable has true value. Otherwise it has false value. 
</p>

<pre class="explanation">
.fr.cb select 
</pre>

<p>
Initially, the title is shown in the titlebar. So at the start, we make the widget
checked with the <code>select</code> command.
</p>

<pre class="explanation">
place .fr.cb -x 50 -y 50 
</pre>

<p>
We place the checkbutton widget on the frame at x=50, y=50 coordinates.
</p>

<pre class="explanation">
if {$selected==true} {

    wm title . checkbutton
} else {
    wm title . ""
}
</pre>

<p>
Inside the onClick procedure, we display or hide the title based on
the selected variable.
</p>

<img src="/img/gui/tcltk/checkbutton.png" alt="checkbutton">
<div class="figure">Figure: checkbutton</div>


<h2>Label</h2>

<p>
The <code>label</code> widget is used to display text or images.
No user interaction is available.
</p>

<pre>
sudo apt-get install libtk-img
</pre>

<p>
In order to run this example, we must install libtk-img package. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we use a label
# widget to show an image.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com

package require Img


frame .fr
pack .fr
image create photo img -file "tatras.jpg"
label .fr.lbl -image img
pack .fr.lbl

wm title . label
wm geometry . +300+300
</pre>

<p>
Our example shows an image on the window.
</p>

<pre class="explanation">
package require Img
</pre>

<p>
By default, the <code>label</code> widget can display only a limited
set of image types. To display a jpg image, we must use an Img
package.
</p>

<pre class="explanation">
image create photo img -file "tatras.jpg"
</pre>

<p>
We create a photo image from the image on the file system. 
</p>

<pre class="explanation">
label .fr.lbl -image img
</pre>

<p>
The photoimage is given to the <code>image</code> parameter of the 
label widget. 
</p>

<pre class="explanation">
pack .fr.lbl
</pre>

<p>
The image is packed into the frame. 
</p>

<pre class="explanation">
wm geometry . +300+300
</pre>

<p>
We specify the x, y coordinates. These are used to position a window on the screen.
We omit the size of the window. The pack manager will set the window size to 
the size of the image. 
</p>


<h2>Scale</h2>

<p>
<code>scale</code> is a widget that lets the user 
graphically select a value by sliding a knob within 
a bounded interval. Our example will show a selected number
in a label widget. 
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we show how to
# use the scale widget.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


frame .fr
pack .fr -fill both -expand 1

scale .fr.scl -orient horizontal -from 0 -to 100 \
    -length 150  -variable val -showvalue 0
place .fr.scl -x 50 -y 50 

label .fr.lbl -textvariable val
place .fr.lbl -x 80 -y 110

wm title . scale
wm geometry . 250x150+300+300
</pre>

<p>
We have two widgets in the above script. A scale and a label.
A value from the scale widget is shown in the label widget. 
</p>

<pre class="explanation">
scale .fr.scl -orient horizontal -from 0 -to 100 \
    -length 150  -variable val -showvalue 0
</pre>

<p>
<code>scale</code> widget is created. The -orient option makes the widget
horizontal. We provide the lower and upper
bounds with the -from and -to options. The currently selected
number is stored in the val variable.  By default the scale widget shows
also the selected number. With the -showvalue option, we hide it. 
</p>

<pre class="explanation">
label .fr.lbl -textvariable val  
</pre>

<p>
A <code>label</code> widget is created. It will display the 
beforementioned val variable.
</p>


<img src="/img/gui/tcltk/scale.png" alt="scale widget">
<div class="figure">Figure: scale widget</div>



<h2>Listbox</h2>


<p>
<code>listbox</code> is a widget that displays a list of objects. It allows the user 
to select one or more items.
</p>

<pre class="code">
#!/usr/bin/wish

# ZetCode Tcl/Tk tutorial
#
# In this script, we show how to
# use the listbox widget.
#
# author: Jan Bodnar
# last modified: March 2011
# website: www.zetcode.com


frame .fr
pack .fr -fill both -expand 1

listbox .fr.lb 
.fr.lb insert end "Scarlett Johansson" "Rachel Weiss" "Natalie Portman" \
    "Jessica Alba" 

bind .fr.lb &lt;&lt;ListboxSelect&gt;&gt; { setLabel [%W curselection]}

place .fr.lb -x 20 -y 20 

label .fr.lbl 
place .fr.lbl -x 20 -y 210

wm title . listbox
wm geometry . 300x250+300+300

proc setLabel { idx } {

    set val [.fr.lb get $idx]
    .fr.lbl configure -text $val

}
</pre>

<p>
In our example, we show a list of actresses in the <code>listbox</code>. 
The currently selected actress is displayed in a label widget. 
</p>

<pre class="explanation">
listbox .fr.lb 
</pre>

<p>
A <code>listbox</code> widget is created with the listbox command.
</p>

<pre class="explanation">
.fr.lb insert end "Scarlett Johansson" "Rachel Weiss" "Natalie Portman" \
    "Jessica Alba" 
</pre>

<p>
Here we insert four actresses to the widget. 
</p>


<pre class="explanation">
bind .fr.lb &lt;&lt;ListboxSelect&gt;&gt; { setLabel [%W curselection]} 
</pre>

<p>
When we select an item in the listbox, the &lt;&lt;ListboxSelect&gt;&gt;
event is generated. We bind the setLabel procedure to this event. 
We also send a parameter to the procedure. The index of the currently
selected value. The <code>%W curselection</code> returns the index.
The %W is a handler for the widget in question and the curselection is
a command executed on this widget. 
</p>


<pre class="explanation">
proc setLabel { idx } {

    set val [.fr.lb get $idx]
    .fr.lbl configure -text $val

}
</pre>

<p>
In the setLabel procedure we find out the value based on the index that
we have obtained. This value is later shown in the label widget. 
</p>

<img src="/img/gui/tcltk/listbox.png" alt="listbox widget">
<div class="figure">Figure: listbox widget</div>


<p>
In this part of the Tcl/Tk tutorial, we have presented several Tk widgets.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified March 10, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

